import React from 'react'
import { useState} from 'react'
import style from '../styles/lx.module.css'
import { ArrowLeft} from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { CountDown, Toast ,Radio} from 'react-vant';
import { useSearchParams } from 'react-router-dom';
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';
export default function List2() {
  let [value, setValue] = useState(0);
  let [a, b] = useSearchParams();
  let z =JSON.parse(a.get("all")) 
  console.log(z, 'dsjkdbjskbc');
  let navigate = useNavigate();
  //倒计时
  let putOrderFlag = () => {
    Toast('支付超时')
    navigate('/list1')
  }
  //进行支付
  let zf = async () => {
    if (value == 1) {
      let { data: { code, result } } = await axios.post('/lx/pcpay',z)
      console.log(code, '2222222222222')
      if (code === 200) {
        console.log(result, 'kakakakak')
        window.location.href = result
      }
    } else {
      Toast('暂未开通')
    }
  }
  return (
    <div className={style.html3}>
      <div className={style.bo1}>
        <ArrowLeft onClick={() => navigate(-1)}></ArrowLeft>
        <span style={{ marginLeft: "3.2rem" }}>付费</span>
      </div>
      <div className={`${style.bo2} ${style.content}`}>
        <p style={{ textAlign: "center", fontSize: '0.5rem' }}>支付{z.payable}</p>
        <p style={{ textAlign: "center", marginTop: '.4rem' }}>支付剩余时间&nbsp;</p>{/*15*60*1000*/}
        <CountDown style={{ textAlign: "center" }} time={100 * 1000} onFinish={() => { putOrderFlag() }} />
        <p style={{ fontSize: '.28rem', marginTop: '.2rem', color: 'gray' }}>支付注意事项:</p>
        <p style={{ fontSize: '.28rem', marginTop: '.2rem', color: 'gray' }}>在付款前，务必仔细核对支付金额，确保无误，避免出现不必要的损失</p>
      </div>
      

      <Radio.Group >
        <div className={`${style.bo3} ${style.content}`}>
          <div><img src="/img/支付宝支付.png" style={{ width: "0.6rem", height: "0.6rem" }} alt="" /> </div>
          <div><Radio name="1" onClick={() => setValue(1)}></Radio></div>
        </div>
        <div className={`${style.bo4} ${style.content}`}>
          <div><img src="/img/微信.png" style={{ width: "0.6rem", height: "0.6rem" }} alt="" /> </div>
          <div><Radio name="2" onClick={() => setValue(2)}></Radio></div>
        </div>
        </Radio.Group >
      <div className={`${style.bo5} ${style.content}`}>
        <p style={{ marginLeft: '38%', color: 'white' }} onClick={() => zf()}>确定支付</p>
      </div>
    </div>
  )
}
